<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Helper function to draw an arrow with a filled head
    function drawArrow(context, fromx, fromy, tox, toy, headlen) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);

        // Set styles for the arrow
        context.strokeStyle = 'black';
        context.fillStyle = 'black';
        context.lineWidth = 2;

        // Draw the line shaft
        context.beginPath();
        context.moveTo(fromx, fromy);
        context.lineTo(tox, toy);
        context.stroke();

        // Draw the arrowhead
        context.beginPath();
        context.moveTo(tox, toy);
        context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        context.closePath();
        context.fill();
    }

    // --- Configuration and Coordinates ---
    const y_line = 100;
    const x1 = 100;
    const total_length = 400;
    const x2 = x1 + total_length;
    const a_length = total_length / 4;
    const x_nail = x1 + a_length;

    const ball_radius = 6;
    const nail_radius = 3.5;
    const arrow_length = 45;
    const arrow_head_length = 12;

    // --- Drawing Start ---

    // 1. Draw the horizontal line connecting the balls
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(x1, y_line);
    ctx.lineTo(x2, y_line);
    ctx.stroke();

    // 2. Draw the two balls
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(x1, y_line, ball_radius, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(x2, y_line, ball_radius, 0, 2 * Math.PI);
    ctx.fill();

    // 3. Draw the downward velocity arrows
    drawArrow(ctx, x1, y_line + ball_radius, x1, y_line + ball_radius + arrow_length, arrow_head_length);
    drawArrow(ctx, x2, y_line + ball_radius, x2, y_line + ball_radius + arrow_length, arrow_head_length);

    // 4. Draw the nail indicator (dot and text)
    const y_nail_dot = y_line + 25;
    ctx.beginPath();
    ctx.arc(x_nail, y_nail_dot, nail_radius, 0, 2 * Math.PI);
    ctx.fill();

    // --- Text Labels ---
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    
    // Labels for balls (1 and 2)
    ctx.font = '24px serif';
    ctx.textBaseline = 'bottom';
    ctx.fillText('1', x1, y_line - 15);
    ctx.fillText('2', x2, y_line - 15);

    // Labels for distances (a and 3a)
    ctx.font = 'italic 24px serif';
    ctx.fillText('a', (x1 + x_nail) / 2, y_line - 10);
    ctx.fillText('3a', (x_nail + x2) / 2, y_line - 10);

    // Label for the nail (钉)
    ctx.font = '24px KaiTi, serif'; // Use KaiTi font for the Chinese character, with a serif fallback
    ctx.textBaseline = 'top';
    ctx.fillText('钉', x_nail, y_nail_dot + 10);

</script>
</body>
</html>